@use 'variable' as *;
html,
body {
    font-family: "Microsoft Yahei", Arial, "PingFangSC-Medium", Helvetica, Tahoma;
    width: 100%;
    height: 100%;
    min-width: 1024px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    margin: 0;
    padding: 0;
    background: $mainBgColor;
}

.clearfix {
    *zoom: 1;
    &:before,
    &:after {
        display: table;
        line-height: 0;
        content: "";
    }
    &:after {
        clear: both;
    }
}

#app {
    height: 100%;
    background: $mainBgColor;
}

.hfly-layout {
    height: 100vh;
    width: calc(100vw - 18px);
    position: relative;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    .layout-header {
        width: 100%;
        height: 40px;
    }
    .layout-container {
        width: 100%;
        display: flex;
        flex-direction: row;
        height: calc(100vh - 42px);
        min-width: 1300px;
    }
    .layout-siderbar {
        display: block;
        padding: 0 10px;
        height: 100%;
        background: $whiteColor;
    }
    .layout-content {
        flex-grow: 1;
        background: none repeat scroll 0 0 #EFF1F4;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow-y: auto;
    }
}

:deep(.h-row) {
    .h-cell {
      background: #F4F5F7;
      .cell {
        border-left: 1px solid #FFFFFF;
        font-size: 12px;
        color: #333;
      }
      &:first-child {
        .cell {
          border-left: none;
        }
      }
    }
}

.margin-left-20 {
    margin-left: 20px;
}

// 详情页样式
.content-container {
    .item-header{
        display: flex;
        align-items: center;
        background-color: $whiteColor;
        font-weight: 400;
        line-height: $menuHeaderTitleHeight;
        height: $menuHeaderTitleHeight;
        padding-left: 20px;
        .header-title {
            font-size: 14px;
            color: $itemHeaderColor;
        }
    }
    .item-content {
        margin: 20px;
        padding: 20px;
        border-radius: 5px;
        box-shadow: var(--el-box-shadow-lighter);
        background: #fff;
        .search-form {
            margin: 16px 20px;
        }
        .operation-btns {
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    }
}

// element-plus样式
.el-table {
    .el-button--small {
        padding: 0; // 表格中按钮
    }
}


// .el-button {
//     background: $commonBtnBGColor;
//     border: 1px solid $commonBtnBdColor;
//     border-radius: 2px;
//     font-family: PingFangSC-Regular;
//     font-size: 12px;
//     color: $menuTextColor;
//     letter-spacing: 0;
//     text-align: justify;
//     font-weight: 400;
//     &:hover {
//       border: 1px solid #337DFF;
//       color: #337DFF;
//     }
//     &:active {
//       background: #E1ECFF;
//       border: 1px solid #337DFF;
//       color: #337DFF;
//     }
//   }
//   .el-button+.el-button {
//     margin-left: 10px;
//   }
//   .el-button.is-disabled {
//     background: $commonDisBtnBGColor;
//     border: 1px solid $commonBtnBdColor;
//     color: $commonDisBtnTxtColor;
//   }
//   .el-button--primary {
//     color: #FFFFFF;
//     background-color: #337dff;
//     border-color: #337dff;
//     &:hover {
//       color: #FFFFFF;
//       background-color: #337dff;
//       border-color: #337dff;
//       }
//   }
//   .el-button--primary.is-disabled {
//     background: $commonDisBtnBGColor;
//     border: 1px solid $commonBtnBdColor;
//     color: $commonDisBtnTxtColor;
//   }
//   .el-button--primary.is-link, .el-button--primary.is-plain, .el-button--primary.is-text {
//     background-color: transparent;
//     border: none ;
//     color: #337DFF;
//     &:hover {
//       background-color: transparent;
//     }
//   }
//   .el-button.is-text.is-disabled {
//     color: #BBBBBB;
//     border: none;
//   }
//   .el-select {
//     border-radius: 2px;
//   }
//   .el-message-box {
//     padding: 0 20px 20px 30px;
//   }
//   .el-message-box__header {
//     padding: 15px 20px 15px 0;
//     .el-message-box__title {
//       font-size: 16px;
//     }
//   }
//   .el-message-box__content {
//     padding: 0 0 30px 0;
//   }
//   .el-message-box__btns {
//     padding: 0;
//   }
//   .el-message-box-confirmbox {
//     background: #F04134 !important;
//     border-radius: 2px;
//     border: 1px solid #F04134 !important;
//     font-family: PingFangSC-Regular;
//     font-size: 12px;
//     color: #FFFFFF;
//     font-weight: 400;
//     &:hover {
//       background: #F04134 !important;
//       border-radius: 2px;
//       border: 1px solid #F04134 !important;
//       color: #FFFFFF;
//     }
//   }
//   .el-dialog__header {
//     height: 50px;
//     font-family: PingFangSC-Regular;
//     font-size: 16px;
//     color: #031129;
//     font-weight: 400;
//     padding: 0 20px;
//     line-height: 50px;
//     border-bottom: 1px solid #E9EBEF;
//     margin-right: 0;
//     .el-dialog__title {
//       font-size: 16px;
//       color: #031129;
//       font-weight: 400;
//     }
//   }
//   .el-dialog__footer {
//     border-top: 1px solid #E9EBEF;
//   }
//   .el-dialog__body {
//     padding: 20px 20px 30px;
//     }
//   .el-dialog__footer {
//     height: 60px;
//     padding: 15px 20px;
//   }
//   .el-table__cell {
//     font-size: 12px;
//     span {
//       font-size: 12px;
//     }
//   }
//   .el-table-filter__list-item {
//     font-size: 12px;
//     color: #337DFF;
//   }
//   .el-input {
//     --el-input-focus-border: #337DFF;
//     --el-input-focus-border-color: #337DFF;
//     .el-input-group__append {
//       padding: 0 18px;
//     }
//   }
//   .el-input__inner {
//     font-size: 12px;
//   }
//   .el-form-item__content {
//     font-size: 12px;
//   }
//   .el-form-item__label {
//     font-size: 12px;
//     padding: 0 20px 0 0;
//   }
//   .el-checkbox__label {
//     font-size: 12px;
//   }
//   .el-select-dropdown__item {
//     font-size: 12px;
//     span {
//       color: #333;
//     }
//   }
//   .el-select-dropdown__item.hover {
//     background: #F5F8FF;
//     span {
//       color: #337DFF;
//     }
//   }
//   .el-select-dropdown__item.selected {
//     background: #F5F8FF;
//   }
//   .el-dropdown-menu__item {
//     font-size: 12px;
//   }
//   .el-upload-dragger {
//     .el-upload__text {
//       em {
//         color: #337dff;
//       }
//     }
//   }
